<template>
    <el-card shadow="never">
        <div class="title_box">
            <div>企微群入群趋势图</div>
            <el-button @click="onExport">导出</el-button>
        </div>
        <el-divider />
        <el-radio-group v-model="pageType" @change="onBtnChange">
            <el-radio-button label="total_join">进群人数</el-radio-button>
            <el-radio-button label="total_retreat">退群人数</el-radio-button>
            <el-radio-button label="total_add">净增人数</el-radio-button>
        </el-radio-group>
        <div id="echarts" ref="myChartLineRef"></div>
        <!-- <el-empty v-else>
      <template #image>
        <img class="empty_img" src="@/assets/noData.png" alt="" />
      </template>
    </el-empty> -->
    </el-card>
</template>

<script setup lang="ts">
import { ref, inject, nextTick, watch, withDefaults, defineProps, defineEmits } from 'vue';
import { export2Img } from '@/utils/utils';
interface Props {
    chart: any;
}
const props = withDefaults(defineProps<Props>(), {
    chart: () => {
        return {
            num: [],
            time: []
        };
    }
});
const emit = defineEmits(['submit']);

const pageType = ref('total_join');
const echarts: any = inject('ec');
const myChartLineRef = ref(null);
const onExport = () => {
    export2Img(
        myChartLineRef.value,
        pageType.value == 'total_join' ? '进群人数' : pageType.value == 'total_retreat' ? '退群人数' : '净增人数'
    );
};
const onBtnChange = (v: any) => {
    pageType.value = v;
    nextTick(() => {
        getEchartsLine(props.chart);
    });
};
const data = ref({
    nameList: [],
    dateList: [],
    dataList: []
});
const getEchartsLine = (dataList: any) => {
    const myChartLine = echarts?.init(myChartLineRef.value);
    myChartLine.clear();
    const data = { nameList: [], dateList: [], dataList: [] };
    data.nameList = dataList.nameList;
    data.dateList = dataList.dateList;
    data.dataList = dataList.nameList?.map((item: any, index: any) => {
        return {
            name: item,
            type: index === dataList.nameList.length - 1 ? 'line' : 'bar',
            stack: index === dataList.nameList.length - 1 ? undefined : 'Ad',
            barWidth: '36%',
            data: dataList.dataList[index]?.[pageType.value],
            smooth: true,
            symbol: 'circle'
        };
    });

    const option = {
        color: ['#FF6B00', '#FFD64A', '#BCEE80'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x: 'center',
            y: 'bottom',
            bottom: 30,
            padding: [0, 0, 10, 0],
            data: data.nameList
        },
        grid: {
            top: 20,
            bottom: 60,
            left: 40,
            right: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: data.dateList,
            boundaryGap: false,
            offset: 3
        },

        yAxis: {
            type: 'value',
            name: '人',
            nameGap: 10, // y轴name与横纵坐标轴线的间距
            nameTextStyle: {
                padding: [0, 35, 10, 0] // 加上padding可以调整其位置
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#969696'
            },
            splitLine: {
                lineStyle: {
                    type: 'line',
                    color: '#e8e8e8' // 分割线颜色
                }
            }
        },
        series: data.dataList
    };
    myChartLine.setOption(option);
    window.onresize = function () {
        myChartLine.resize();
    };
};
watch(
    () => props.chart,
    val => {
        nextTick(() => {
            // setData()
            getEchartsLine(val);
        });
    },
    { deep: true }
);
</script>

<style lang="scss" scoped>
.title_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-divider {
    margin-top: 8px;
    margin-bottom: 16px;
}

#echarts {
    display: flex;
    justify-content: center;
    height: 420px;
}

.empty_img {
    transform: translateX(13%);
}
</style>
